<template>
	<view class="swiper-box">
		<swiper :duration="500" class="swiper" circular @change="swierChange" :current="currentIndex">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" class="bg-img"></image>
				</view>
			</swiper-item>
		</swiper>
		<scroll-x :datalist="swiperList" @select-index="selectBg" ref="myScroll"
			:current-index="currentIndex"></scroll-x>
	</view>
</template>

<script>
	import scrollX from '@/components/scroll-x.vue';
	export default {
		components: {
			scrollX
		},
		name: "background-swiper",
		props: {
			swiperList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				currentIndex: 0
			};
		},
		methods: {
			swierChange(e) {
				this.currentIndex = e.detail.current
				this.$refs.myScroll.getRect(`#item${this.currentIndex}`)
			},
			selectBg(index) {
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		padding: 0 10px;

		.swiper {
			height: 300px;

			.swiper-item {
				height: 100%;

				.bg-img {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}

			}
		}
	}
</style>